<template>
    <div id="background">
        <el-container>
            <el-header style="height:200px">
                <div >
                    <el-row type="flex" style="margin-top:40px">
                        <el-col :xs="3" :sm="3" :md="3" :offset="2">
                            <img v-bind:src="backIcon" style="height:28px" @click="back"/>
                        </el-col>
                     </el-row>
                    <el-row type="flex" justify="center" style="margin-bottom:30px">
                    <el-col :xs="20" :sm="20" :md="20" class="imgCol">
                        <img v-bind:src="titleImg" style="height:40px"/>
                    </el-col>
                    </el-row>
                    <el-row type="flex" class="stepBottom" justify="center">
                        <el-col :xs="22" class="imgCol">
                            <img v-bind:src="step1Img" style="height:25px"/>
                        </el-col>
                    </el-row>
                </div>
            </el-header>
            <el-main>
                <div id="inputHeight">
                    
                    <!-- <el-row type="flex" style="margin-bottom:15px">
                        <el-col :xs="2" :sm="2" :md="2" :offset="2" class="imgCol"><img v-bind:src="phoneIcon" style="height:25px"/></el-col>
                        <el-col :xs="17" :sm="17" :md="17">
                            <el-input class="forgetInput" id="forgetInput1" v-model="loginForm.phone" placeholder="请输入手机号" clearable style="width:100%"></el-input>
                        </el-col>
                    </el-row>
                    <el-row type="flex"  style="margin-bottom:15px">
                        <el-col :xs="2" :sm="2" :md="2" :offset="2" class="imgCol"><img v-bind:src="codeIcon" style="height:20px"/></el-col>
                        <el-col :xs="12" :sm="12" :md="12">
                            <el-input class="forgetInput" id="forgetInput2" v-model="loginForm.yanZhen" placeholder="请输入验证码" clearable></el-input>
                            
                        </el-col>
                        <el-col :xs="7" :sm="7" :md="7">
                            <button v-show="!showTime" class="btnYanZhen" style="color:#cccccc" @click="getYanZhen" :disabled="disYanZhen" id="yanZhenBtn">获取验证码</button>
                            <button v-show="showTime" class="btnYanZhen" style="color:#cccccc" @click="getYanZhen" disabled>{{count}}s</button>
                        </el-col>
                    </el-row>
                    <el-row type="flex" >
                        <el-col :xs="2" :sm="2" :md="2" :offset="2" class="imgCol">
                            <el-checkbox v-model="checked" ></el-checkbox>
                        </el-col>
                        <el-col class="words" style="font-size:13px" :xs="19" :sm="22" :md="22"><p>我已同意<a @click="goToXieYi" style="color:#53cdf5">《新职通服务协议》</a></p></el-col>
                    </el-row> -->
                </div>
                <div>
                    <el-row type="flex" justify="center" >
                        <el-col :xs="20" :sm="20" :md="20" >
                            <button v-show="checked" class="btn" @click="goToStep2"><p class="btnWords">下一步</p></button>
                            <button v-show="!checked" class="btnNotRegist" ><p class="btnWords">下一步</p></button>
                        </el-col>
                    </el-row>
                </div>
            </el-main>
            <el-footer id="thirdPositionRegist" :class="whichPosition?'forgetFootPosition':''">
                <el-row type="flex" justify="center">
                    <img v-bind:src="thirdIcon" style="height:18px;width:100%;margin-bottom:8px"/>
                </el-row>
                <el-row type="flex">
                    <el-col :xs="4" :sm="4" :md="4" :offset="7" >
                        <img v-bind:src="qqIcon" style="height:2.5em"/>
                    </el-col>
                    <el-col :xs="4" :sm="4" :md="4" :offset="2">
                        <img v-bind:src="wechatIcon" style="height:2.5em"/>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>
</template>
<script>
import backIcon from '../../assets/img/regist/back.png'
import titleImg from '../../assets/img/regist/title.png'
import step1Img from '../../assets/img/regist/1.png'
import phoneIcon from '../../assets/icon/login/phone.png'
import codeIcon from '../../assets/icon/login/code.png'
import qqIcon from '../../assets/icon/login/qq.png'
import wechatIcon from '../../assets/icon/login/wechat.png'
import thirdIcon from '../../assets/img/login/third.png'
import { Toast} from 'vant';
export default {
    data(){
        return{
            disYanZhen:true,
            showTime:false,
            count:60,
            backIcon:backIcon,
            titleImg:titleImg,
            step1Img:step1Img,
            phoneIcon:phoneIcon,
            codeIcon:codeIcon,
            qqIcon:qqIcon,
            wechatIcon:wechatIcon,
            thirdIcon:thirdIcon,
            //normalHeight:document.documentElement. clientHeight,
            loginForm:{
                phone:'',
                yanZhen:''
            },
            checked:true,
             //实时屏幕高度
            showHeight:document.documentElement.clientHeight,
            height:document.documentElement.clientHeight,
            whichPosition:true,
        }
    },
    watch:{
        loginForm:{
            handler:function(){
                console.log("loginform:");
                console.log(this.loginForm);
                var yanzhen=document.getElementById("yanZhenBtn");
                var pattern = /^1[34578]\d{9}$/;
                if(this.loginForm.phone.length==11 && pattern.test(this.loginForm.phone)){
                    yanzhen.style.color='#53cdf5';
                    this.disYanZhen=false;
                   console.log(this.loginForm.phone);
                }else{
                     yanzhen.style.color='#cccccc';
                    //Toast("请输入正确的手机号！");
                     this.disYanZhen=true;
                }
            },
            deep: true
           
        },
        showHeight(val){
            //console.log("shoHeight"+this.showHeight);
            this.whichFoot();
        },
    },
    mounted(){
        var normalHeight=sessionStorage.getItem('normalHeight');

        var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";
    },
    methods:{
        goToXieYi(){
            this.$router.push({
                path:'/mine/fuWuXieYi'
            })
        },
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        goToStep2(){
            this.$router.push({
                path:'/forget/forgetStep2',
                query:{
                    form:this.loginForm
                }
            })
        },
        //获取验证码
        getYanZhen(){
           
            var URL=this.IP.IP+'/user/SMSCode';
            console.log(URL);
            this.showTime=true;
            this.count=60;
            let clock = window.setInterval(() => {
                this.count--
                if (this.count < 0) {     //当倒计时小于0时清除定时器
                    window.clearInterval(clock);
                    this.showTime=false;
                    this.count = 60;
                }
            },1000)
            this.$ajax({
                method:'post',
                url:URL,
                params:{
                    phone:this.loginForm.phone,
                    smsCodeType:'RESETPASSWORD'
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    Toast(response.data.data);
                 
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //比较实时高度，判断底部样式
        whichFoot(){
            if(this.showHeight<this.height){
                //console.log("foot not fixed");
                this.whichPosition=false;
            }else{
                //console.log("foot fixed");
                this.whichPosition=true;
            }
        }
    }
}
</script>
<style>
.forgetFootPosition{
    position:fixed;
    bottom:20px;
    width:100%
}
.el-header,el-main,el-footer,el-aside{
  padding:0px;
  margin: 0px;
}
.stepBottom{
    margin-bottom: 50px;
}
.forgetInput .el-input__inner {
    font-size: 1.125em;
    border: none;
    border-bottom: 1px solid;
    border-color: #F0F0F0;
    background-color: rgba(255, 255, 255, 0);
    color: #707070;
    border-radius: 0px;
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}

.btnYanZhen{
    height: 100%;
    font-size:0.8em;
    width: 100%;
    background-color:rgba(255, 255, 255, 0);
    color: #53cdf5;
    border-style: none;
    outline: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color:#53cdf5;
    border-color:#53cdf5;
}
.el-checkbox__inner {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
}
.words{
    color:#B8B8B8;
}
.btn{
    line-height: 0.75em;
    width: 100%;
    background-color: #53cdf5;
    border-style: none;
    outline: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
}
.btnNotRegist{
    line-height: 0.75em;
    width: 100%;
    background-color: #B8B8B8;
    border-style: none;
    outline: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
}
.btnWords{
    font-size: 1.125em;
    color: #ffffff;
}
#thirdPositionforget{
    bottom: 10px;
}
#inputHeight{
    height: 200px;
}
@media screen and (max-height: 600px){
  #inputHeight{
      height: 160px;
  }

}
</style>
